<template>
	<view class="cu-modal" :class="modals=='purchaseNotesModal'?'show':''" @touchmove.stop.prevent="()=>{return}" @tap="hideModal">
		<view class="cu-dialog" @tap.stop >
			<view class="cu-bar bg-primary text-white justify-end">
				<view class="content">Reminder</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close"></text>
				</view>
			</view>
			<view class="text-left">
				<view class="padding-xl borders-bottom">
					<view>
						<text>Data Plan：</text>
						<text class="text-primary">{{message.title}}</text>
					</view>
					<view>
						<text>Charged：</text>
						<text class="text-primary">{{message.currencyUnit}}{{message.payAmount}}</text>
					</view>
				</view>
				<view class="padding-lr-xl padding-top padding-bottom-xl">
					<view class="margin-bottom-sm">Data plan description： </view>
					<view class="uni-card borders radius padding-sm">
						<ul class="uni-card-ul">
							<li>When buying、 please confirm the bought plan carefully. please shall bear the loss caused by wrong bought.</li>
							<li>If bought plan is inconsistent with actual effective plan、 please timely feedback to customer service.</li>
							<li>Our company has the final interpretation right.</li>
						</ul>
					</view>
					<view class="text-gray padding-sm">ICCID：{{iccid}}</view>
					<view class="margin-top-sm" @tap="()=>check=!check">
						<radio class="primary lg" :class="{'checked':check}" :checked="check" style="transform:scale(0.7)"></radio>
						I have read and agree to the data plan rules.
					</view>
					<button class="cu-btn block lg bg-primary margin-top-lg" :disabled="!check" @tap="handleClick">Confirm Recharge</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import modalMessage from '@/utils/modal.js'
export default{
	props:{
		modalName:{
			type:String,
			default:''
		},
		message:{
			type:Object,
			default:()=>{
				return{}
			}
		},
		iccid:{
			type:String,
			default:''
		}
	},
	// emits:['update:modalName','click'],
	data() {
		return {
			check:true
		}
	},
	onLoad(opt) {
	
	},
	onShow() {
		const { modalState,hideModal } = modalMessage(props,emit)
	},
	methods: {
		handleClick (){
			// emit('click')
		}
	},
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
	@import '@/common/style/uni.less';
  @import '@/common/style/icon.css';
/* .uni-card-ul {
	display: block;
	list-style-type: disc;
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 20upx;
	
}
.uni-card-ul li{
	margin-bottom:10upx;
	font-size:24upx
} */
</style>
